@import "tailwindcss";

@layer base {
    body {
        @apply bg-gray-50 text-gray-900;
    }
}

@layer components {
    .code-editor {
        @apply font-mono text-sm leading-relaxed;
    }

    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-secondary {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium transition-all duration-200;
    }

    .btn-success {
        @apply bg-green-600 hover:bg-green-700 text-white font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
    }
}